<template>
  <el-dialog
    :title="type == 'add' ? '添加广告' : '修改广告'"
    v-model="visible"
    @close="handleClose"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="formRef"
      class="good-form"
      label-width="120px"
    >
      <el-form-item label="排序值" prop="notice_id">
        <el-input
          onkeyup="this.value=this.value.replace(/\s+/g,'')"
          v-model="ruleForm.notice_id"
          style="width: 60%"
          :readonly="isReadOnly"
        />
      </el-form-item>
      <el-form-item label="添加文本" prop="text">
        <el-input
          onkeyup="this.value=this.value.replace(/\s+/g,'')"
          v-model="ruleForm.text"
          style="width: 60%"
        />
      </el-form-item>
      <el-form-item label="添加时间" prop="atime">
        <!-- <el-input v-model="ruleForm.atime" /> -->
        <el-date-picker
          v-model="ruleForm.atime"
          type="datetime"
          placeholder="添加时间"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { addNotice, getNotice, updateNotice } from "../../api/notice";
import { reactive, ref, toRefs, getCurrentInstance } from "vue";

const props = defineProps({
  type: String,
});

const { proxy } = getCurrentInstance();
const pictureUpload = ref(null);
const isReadOnly = ref(false);
const formRef = ref(null);
const state = reactive({
  visible: false,
  ruleForm: {
    notice_id: "",
    text: "",
    atime: "",
  },
  rules: {
    url: [{ required: "true", message: "文本不能为空", trigger: ["change"] }],
    sort: [{ required: "true", message: "排序不能为空", trigger: ["change"] }],
  },
  id: "",
});

const { visible, ruleForm, rules, id } = toRefs(state);

// 开启弹窗
const open = (notice) => {
  // 开启弹窗
  state.visible = true;
  // 判断是添加还是修改
  if (notice) {
    // 修改
    state.ruleForm = {
      notice_id: notice.notice_id,
      text: notice.text,
      atime: notice.atime,
    };
    isReadOnly.value = true;
  } else {
    // 添加
    state.ruleForm = {
      notice_id: "",
      text: "",
      atime: "",
    };
    isReadOnly.value = false;
  }
};
// 关闭弹窗
/* const close = () => {
  state.visible = false;
}; */
const handleClose = () => {
  formRef.value.resetFields();
};

const emit = defineEmits(["changeTableData"]);

// 点击确定
const submitForm = () => {
  var part = new RegExp("<script>", "ig");
  var partEnd = new RegExp("<\/script>", "ig");
  if (part.test(state.ruleForm.text) || partEnd.test(state.ruleForm.text)) {
    ElMessage({
      type: "error",
      message: "文本内含有非法字符",
    });
    return;
  }
  if (state.ruleForm.notice_id === "") {
    ElMessage({
      type: "error",
      message: "排序值不能为空",
    });
    return;
  }
  if (state.ruleForm.text === "") {
    ElMessage({
      type: "error",
      message: "文本不能为空",
    });
    return;
  }
  if (state.ruleForm.atime === "") {
    ElMessage({
      type: "error",
      message: "时间不能为空",
    });
    return;
  }
  // 判断是添加还是修改
  if (!isReadOnly.value) {
    addNotice(proxy, state.ruleForm).then((data) => {
      console.log(data);
      if (data.code === 200) {
        getNotice(proxy).then((result) => {
          emit("changeTableData", result);
        });
      }
    });
  } else {
    updateNotice(proxy, state.ruleForm).then((data) => {
      if (data.code === 200) {
        getNotice(proxy).then((result) => {
          emit("changeTableData", result);
        });
      }
    });
  }
  // 关闭弹窗
  state.visible = false;
};

// 因为使用 script setup的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 script setup 中声明的绑定。
// 为了在 script setup 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏：
defineExpose({
  open,
});
</script>

<style scoped></style>
